<template>
    <div id="notice-list">
        <div class="filter">
            <el-form :inline="true" :model="filter" ref="filter" >
                <el-form-item label="标题" prop="name">
                    <el-input v-model="filter.name" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="状态"  prop="status">
                    <el-select v-model="filter.status" placeholder="请选择状态">
                        <el-option v-for="(value,key) in initData.statusList" :label="key" :value="value" :key="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间" prop="publishDate">
                    <el-date-picker
                        v-model="filter.publishDate"
                        type="daterange"
                        format="yyyy.MM.dd"
                        value-format="yyyy-MM-dd"
                        align="right"
                        unlink-panels
                        clearable
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        range-separator="至"
                        :default-time="[nowTime,nowTime]"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="filter-button">
                    <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
                    <el-button type="primary" size="small" @click="resetFilter">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="list">
            <div class="button-bar">
                <el-button class="btn" type="primary" size="mini" icon="el-icon-plus" @click="onAdd" >新建</el-button>
                <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDelete" >删除</el-button>
            </div>
            <div class="data">
                <el-table :data="listData.data" ref="listData"  stripe @select-all="onSelectAll" @select="onSelect">
                    <el-table-column type="selection"  align="center" width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                        <div slot-scope="scope">
                            {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                        </div>
                    </el-table-column>
                    <el-table-column label="标题" prop="title" width="" ></el-table-column>
                    <el-table-column label="发布人" prop="publishUser"  align="center"  width=""></el-table-column>
                    <el-table-column label="状态" prop="statusName"  align="center"  width=""></el-table-column>
                    <el-table-column label="创建时间" prop="createDate"  align="center"  width=""></el-table-column>
                    <el-table-column label="发布时间" prop="publishDate"  align="center"  width=""></el-table-column>
                    <el-table-column label="操作" prop="opt" align="center"  width="" class="opt">
                        <slot slot-scope="scope">
                            <el-button size="mini" @click="onViewDetail(scope)">查看</el-button>
                        </slot>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next" 
                :current-page="listData.pageNum"
                :page-size="listData.pageSize"
                :total="listData.total" 
                @current-change="getList"
                @prev-click="getList"
                @next-click="getList"
            ></el-pagination>
        </div>
       
    </div>
</template>
<script>
export default {
    props:{
        initData:{
            type:Object,
            default:{},
            require:false,
        },
    },
    data(){
        return{
            filter: {
                name:'',
                status:'',
                publishDate:''
            },
            listData:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[]
            },
            checked:[],
            statusList:[],//公告状态
        }
    },
    watch:{
        initData(newVal){
            this.filter.infoType =newVal.tabId
            this.statusList=newVal.statusList
            if(this.filter.infoType===''){return}
            this.getList()
        },
    },
    computed:{
        nowTime(){
            var date=new Date()
            var HH=date.getHours()
            var mm=date.getMinutes()
            var ss=date.getSeconds()
            return HH+":"+mm+":"+ss
        }
    },
    methods:{
        getList(pageNum){
            var pageNum=typeof pageNum==='number' ? pageNum :this.listData.pageNum;
            var submitData={
                current:pageNum,
                size:this.listData.pageSize,
                ...this.filter,
            };
            submitData.startTime=submitData.publishDate[0]
            submitData.endTime=submitData.publishDate[1]
            delete submitData.publishDate
            this.$http.getNoticeList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                this.$set(this.listData,'pageNum',data.current || this.listData.pageNum);
                this.$set(this.listData,'pageSize',data.size || this.listData.pageSize);
                this.$set(this.listData,'total',data.total );
                var newData=this.transData(data.records)
                this.$set(this.listData,'data',newData)
                
            }).catch((err)=>{
                
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,查询失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },


        //查看详情
        onViewDetail(rowData){
            var initData={...this.initData}
            initData.optType='detail'
            initData.data=rowData.row.id
            this.$emit('switchTabComponent',initData)
        },
         //全选
        onSelectAll(selection){
            this.checked=selection
        },
        //选择
        onSelect(selection,row){
            this.checked=selection
        },

        
        onAdd(){
            this.checked=[];
            this.$refs.listData.clearSelection();
            var initData={...this.initData}
            initData.optType='edit'
            initData.data=null
            initData.from='list'
            this.$emit('switchTabComponent',initData)
        },


        onDelete(){
            if(this.checked.length===0){
                this.$message.warning("请选中要删除的公告!")
                return 
            }
            let ids=this.checked.map((item)=>{
                return item.id
            });
            let submitData={ids:ids,moduleName:"公告管理"}
            this.$http.deleteNotice(submitData)
            .then((res)=>{
                this.$message.success("删除成功!");
                this.getList()//重新加载列表
            }).catch((err)=>{
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,删除失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },


        transData(data){
            var newData=data.map((item)=>{
                for(var key in this.statusList){
                    if(this.statusList[key]===item.status){
                        item.statusName=key
                    }
                }
                return item
            })
            return newData
        },

        resetFilter(){
            this.$refs.filter.resetFields()
            this.getList()
        }

    },
    created(){
       // this.getList()
    }


}
</script>
<style lang="scss" scoped>
#notice-list{
    height: 100%;
    display: flex;
    flex-direction:column;
}

.filter{
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    /deep/ .el-form{
        flex-wrap: nowrap;
        .el-input__inner{
	        height:35px;
	        line-height:35px;
        }
        .el-date-editor--daterange.el-input__inner{
            width:300px;
        }
        .el-date-editor{
            width:auto;
        }
    }

}
.list{
    margin: 10px;
    margin-top: 0px;
    border:1px solid #eee;
    border-radius: 10px;
    flex:1;
    display: flex;
    flex-direction:column;
    .button-bar{
        width: 100%;
        .btn{
            margin: 10px;
        }
    }
    .data{
        flex: 1;
        overflow: auto;
    }
}


</style>
<style scoped lang="scss">
//element样式微调
.el-form.el-form--inline{
    .el-form-item{
        flex-basis: 30%;
        flex-grow: 1;
        margin: 10px;
    }
}



</style>


